<template>
  <div class="setting">
    <el-button size="large" type="primary" @click="hadelClick">
      <el-icon class="setting-icon">
        <Setting/>
      </el-icon>
    </el-button>
    <el-drawer v-model="drawer" title="系统设置" size="20%">
      <el-icon><Unlock /></el-icon>
      <span class="logoshow">logo显示与隐藏</span>
      <el-switch v-model="systemStore.toggleStore" />
    </el-drawer>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {Unlock} from "@element-plus/icons-vue";
import {useSystemStore} from "@/stores/systemStore.js";
const drawer = ref(false)
const systemStore = useSystemStore()

const hadelClick = () => {
  drawer.value = !drawer.value
}
</script>

<style lang="scss" scoped>
.setting {
  position: fixed;
  right: 0;
  top: 300px;
  z-index: 100;
}

.setting-btn {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 50px;
}
.logoshow{
  margin-right: 20px;
  margin-left: 10px;
}

.setting-icon {
  font-size: 25px;
}
</style>